{% extends "main.html" %}
{% block body %}
<script>
		/*当点击调用此方法后,将悬浮窗口显示出来,背景变暗*/
		function displayWindow() {
			/*悬浮窗口的显示,需要将display变成block*/
			document.getElementById("window").style.display = "block";
			/*将背景变暗*/
			document.getElementById("shadow").style.display = "block";
		}

		/*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
		function hideWindow() {
			document.getElementById("window").style.display = "none";
			document.getElementById("shadow").style.display = "none";
		}
	</script>



<style>
		.shadow_css {
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 10;
			/* 为mozilla firefox 设置透明度  */
			-moz-opacity: 0.6;
			/* 设置透明度 */
			opacity: .60;
			/* 为IE 设置透明度  */
			filter: alpha(opacity=66);
		}
		
		.window_css {
			display: none;
			position: absolute;
			top: 20%;
			left: 25%;
			width: 50%;
			height: 60%;
			border: 3px solid honeydew;
			background-color: aliceblue;
			z-index: 11;
		}
	</style>

<style type="text/css">
.myttpp{
	border:none;
	background: #0000;
	width: 50px;
	height: 20px;
	text-align: center;


}


<!--
h2{font-family: 黑体;font-size: 28px;
border-bottom-width: thick;text-align: center
}

/*.p2{border-style: dotted solid double;border-width: 5px 10px 15px 20px}*/
-->

button[type=submit] {
	background: #008EAD;
	border: 1px solid #008EaF;
	color: #fff;
	border-radius: 5px;
	font-weight: bold;
	padding: 10px 15px;
	cursor: pointer;
	text-align: center;

}
button[type=submit]:hover{
	background: #694530;
	text-align: center;
}
.mybutton{
		background: #008EAD;
	border: 1px solid #008EaF;
	color: #fff;
	border-radius: 5px;
	font-weight: bold;
	padding: 10px 15px;
	cursor: pointer;

	text-align: center;

}
.mybutton2{
	text-align: center;
}
.mybutton3{
	text-align: right;
}
.y6{border: 1px solid #D5D5D5;background-image: linear-gradient(#FCFCFC, #EEE);background-color: #f7f7f7;text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);text-align:center;margin-right:auto;margin-left:auto;width:130px;margin-top:7px;display:block;padding:7px;border-radius:5px;color:#000}.y6:link{color:#000}.y6:hover{border:1px solid #fc3;color:#999;}.y6:visited{color:#333}.y6:active{background-color:#ffc;    background-image: linear-gradient(#dcdcdc, #d8d8d8);box-shadow:inset 0 2px 3px rgba(0,0,0,0.15)}
.y3{
	border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px;
                padding-left:5px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.y3:focus{ border-color: #66afe9;
                    outline: 0;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
</style>


<!-- <div class="mybutton"><button type="submit" href="#">交卷</button></div> -->

<!-- <p class="p2">边框样式和上一段文字的一样，只是该段文字应用边框宽度属性设置了上、右、下、左边框的宽度分别为5像素、10像素、15像素和20像素。</p> -->

		<!--用来引出悬浮窗口的div-->
		<div>
			<h2>小学生四则运算出题系统</h2>

			<hr>
			<p>请同学完成以下四则运算(除法保留小数点后两位)：</p>
			<form action='qingqiu' method="post">
				{% csrf_token %}
				{% for item in sumTopic %}
					
					{% if item == "br" %}
						</br>
					{% else %}
					<h>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{{item}}(<input type="text"name="res" value="{{result}}" class="myttpp">)</h>
					{% endif %}
				{% endfor %}
				</br></br></br></br>
				<div class="mybutton2"><input type="submit" class="mybutton" value="交卷"></div>
			</form>
		</div>
			<form action=teacher.html method="post">
				{% csrf_token %}
				<h>请设置题目个数：</h><input class="y3" type='text' name="topicNum" value="{{ topicNum }}">
				</br>
				</br>
				<h>请设置数字范围：</h>
				<input class="y3" type='text' name="minNum" value="{{ minNum }}">
				<h>~</h>
				<input class="y3" type='text' name="maxNum" value="{{ maxNum }}">
				<div class="mybutton2"><input type="submit" class="mybutton" value="出卷"></div>
			</form>
			<a href="javascript:void(0)" onclick="displayWindow()">
				分享
			</a>
			<form action=teacher.html method="post">
				{% csrf_token %}
				<div class="mybutton3"><input type="submit" class="mybutton" value="导出成文档"></div>
			</form>
		</div>
		<!--悬浮窗口-->
		<div id="window" class="window_css">
			<a href="javascript:void(0)" onclick="hideWindow()">
				&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;×
			</a>
			<div>
				<h>这是分享页面</h>
			</div>
		</div>
		<!--出现悬浮窗口后,背景变暗-->
		<div id="shadow" class="shadow_css"></div>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>


{% endblock %}









